<script setup>
import { Avatar, Search, BellFilled } from "@element-plus/icons-vue";
import { ref } from "vue";
// 开关按钮
const value2 = ref(true);
let font_size = 20;
// 点击运行搜索框运行serach函数
function serach() {
  console.log(1111);
}
//点击消息能运行message函数
function message() {
  console.log(222);
}
//点击头像能运行personal函数
function personal() {
  console.log(333);
}
//点击登陆注册能运行login函数
function login() {
  console.log(444);
}
</script>
<template>
  <div class="topbar">
    <!-- 前面logo -->
    <div class="top-logo">
      <img src="" alt="" />
    </div>

    <!-- 中间搜索框 -->
    <div class="top-search">
      <input type="text" />
      <el-icon :size="font_size" color="#666" v-on:click="serach">
        <Search />
      </el-icon>
    </div>

    <!-- 右边 用户 +登录注册 +一键换肤 -->
    <div class="top-right">
      <div class="user">
        <el-icon :size="font_size" v-on:click="message">
          <BellFilled />
        </el-icon>
        <img
          src="../../assets/img/logo.jpg"
          alt=""
          class="touxiang"
          v-on:click="personal"
        />
        <span class="login-btn" v-on:click="login">登录|注册</span>
      </div>

      <div class="changeBgc">
        <span class="changeText">一键换肤</span>
        <el-switch
          v-model="value2"
          class="ml-2"
          style="--el-switch-on-color: #4f60d3; --el-switch-off-color: #cc94cc"
        />
      </div>
    </div>
  </div>
</template>

<script>
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.el-icon {
  &:hover {
    cursor: pointer;
    color: #4f60d3;
  }
}
.topbar {
  width: 100%;
  height: 65px;
  background-color: #cc94cc;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .top-logo {
    img {
      vertical-align: top;
      width: 120px;
      height: 65px;
    }
  }

  .top-search {
    width: 450px;
    max-width: 450px;
    height: 40px;
    padding-left: 12px;
    background-color: #fff;
    border-radius: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;

    input {
      height: 90%;
      width: 90%;
      border: none;
      vertical-align: top;
      outline: none;
    }
  }

  .top-right {
    width: 30%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .user {
      width: 50%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .login-btn {
      width: 69px;
      color: #666;
      font-size: 0.875rem;
    }
    .touxiang {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .changeBgc {
      span {
        font-size: 0.875rem;
        color: #666;
      }
    }
  }
}
</style>
